<template>
	<view class="container">
		<view class="hd">
			<picker @change="bindTpyeChange" range-key="name" :range="typeList">
				<button class="picker">{{typeList[typeIndex].name}}<view class="arrow"></view></button>
			</picker>
			<picker @change="bindBitNumChange" range-key="name" :range="bitNumList">
				<button class="picker">{{bitNumList[bitNumIndex].name}}<view class="arrow"></view></button>
			</picker>
			<picker @change="bindSubNumeChange" :range="subNumList">
				<button class="picker">{{subNumList[subNumIndex]}}题<view class="arrow"></view></button>
			</picker>
		</view>
		<scroll-view class="scroll" scroll-y="true" >
			<view v-for="(item,index) in filterList" class="history">
				<view>{{index+1}}</view>
				<view class="name">{{item.name}}</view>
				<view>{{item.time}}秒</view>
				<view>{{item.date.split("T")[0]}}</view>
			</view>
		</scroll-view>
		<view class="text" v-if="filterList.length==0">暂无数据</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeList: [{
					value: 1,
					name: '加法'
				},{
					value: 2,
					name: '减法'
				},{
					value: 3,
					name: '乘法'
				},{
					value: 4,
					name: '除法'
				}],
				typeIndex: 0,
				bitNumList: [{
					value: 10,
					name: '10以内'
				},{
					value: 20,
					name: '20以内'
				},{
					value: 50,
					name: '50以内'
				}],
				bitNumIndex: 0,
				subNumList: [5,10,20,30,50],
				subNumIndex: 0,
				history: [],
				filterList: [],
			}
		},
		methods: {
			bindTpyeChange(e) {
				this.typeIndex = e.detail.value
				this.filter();
			},
			bindBitNumChange(e) {
				this.bitNumIndex = e.detail.value
				this.filter();
			},
			bindSubNumeChange(e) {
				this.subNumIndex = e.detail.value
				this.filter();
			},
			filter() {
				let {typeList,typeIndex,bitNumList,bitNumIndex,subNumList,subNumIndex} = this;
				this.filterList = this.history.filter(item=>{
					return item.mathType==typeList[typeIndex].value && item.bitNum==bitNumList[bitNumIndex].value && item.subNum==subNumList[subNumIndex];
				}).sort((a,b)=>a.time-b.time)
			}
		},
		onShow() {
			setTimeout(()=>{
				this.history = uni.getStorageSync('history');
				this.filter();
			},100)
		}
	}
</script>

<style lang="scss">
	.text {
		text-align: center;
		margin: 40upx;
		color: #999;
	}
	.scroll {
		flex: 1;
		.history {
			display: flex;
			justify-content: space-between;
			padding: 40upx 0;
			align-items: center;
			:nth-child(1) {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 40upx;
				height: 40upx;
				border-radius: 4px;
				color: #333;
			}
		}
		.name {
			width: 100upx;
			text-align: center;
		}
		.history:nth-child(1) :nth-child(1){
			background-color: red;
			color: #fff;
		}
		.history:nth-child(2) :nth-child(1){
			background-color: #ff7800;
			color: #fff;
		}
		.history:nth-child(3) :nth-child(1){
			background-color: #ffd700;
			color: #fff;
		}
	}
	.container {
		padding: 0 40upx;
		display: flex;
		flex-direction: column;
	}
	.hd {
		display: flex;
		justify-content: space-between;
		padding-top: 40upx;
	}
	.picker {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.arrow {
		width: 16upx;
		height: 16upx;
		border: 2px solid;
		border-color: transparent transparent #999 #999;
		transform: rotate(-45deg) translateY(-8upx);
		margin-left: 24upx;
	}
</style>
